import React from 'react';
import { Card, Form, DatePicker, Select, Input, Button, Space, Divider } from 'antd';
import { FilterOutlined, ReloadOutlined, ClearOutlined } from '@ant-design/icons';
import { useAuditLogStore } from '../../stores/auditLogStore';
import dayjs from 'dayjs';

const { RangePicker } = DatePicker;
const { Option } = Select;

const LogFilterPanel: React.FC = () => {
  const { filters, setFilters, clearFilters, fetchLogs } = useAuditLogStore();
  const [form] = Form.useForm();
  
  // 模拟数据
  const eventTypes = ['登录', '文档创建', '文档更新', '文档删除', '系统配置'];
  const resourceTypes = ['用户', '文档', '模型', '系统'];
  const statuses = ['成功', '失败', '警告'];
  const users = Array.from({ length: 10 }).map((_, i) => ({ id: `user-${i}`, name: `用户${i}` }));
  
  const handleFilter = () => {
    const values = form.getFieldsValue();
    setFilters({
      dateRange: values.dateRange ? [values.dateRange[0].format('YYYY-MM-DD'), values.dateRange[1].format('YYYY-MM-DD')] : null,
      userIds: values.userIds || [],
      eventTypes: values.eventTypes || [],
      resourceTypes: values.resourceTypes || [],
      status: values.status || [],
      searchText: values.searchText || '',
    });
    fetchLogs();
  };
  
  const handleReset = () => {
    form.resetFields();
    clearFilters();
    fetchLogs();
  };
  
  return (
    <Card title="日志筛选" extra={<FilterOutlined />}>
      <Form
        form={form}
        layout="vertical"
        initialValues={{
          dateRange: filters.dateRange ? [dayjs(filters.dateRange[0]), dayjs(filters.dateRange[1])] : null,
          userIds: filters.userIds,
          eventTypes: filters.eventTypes,
          resourceTypes: filters.resourceTypes,
          status: filters.status,
          searchText: filters.searchText,
        }}
      >
        <Form.Item name="dateRange" label="日期范围">
          <RangePicker style={{ width: '100%' }} />
        </Form.Item>
        
        <Form.Item name="userIds" label="用户">
          <Select mode="multiple" placeholder="选择用户" allowClear>
            {users.map(user => (
              <Option key={user.id} value={user.id}>{user.name}</Option>
            ))}
          </Select>
        </Form.Item>
        
        <Form.Item name="eventTypes" label="事件类型">
          <Select mode="multiple" placeholder="选择事件类型" allowClear>
            {eventTypes.map(type => (
              <Option key={type} value={type}>{type}</Option>
            ))}
          </Select>
        </Form.Item>
        
        <Form.Item name="resourceTypes" label="资源类型">
          <Select mode="multiple" placeholder="选择资源类型" allowClear>
            {resourceTypes.map(type => (
              <Option key={type} value={type}>{type}</Option>
            ))}
          </Select>
        </Form.Item>
        
        <Form.Item name="status" label="状态">
          <Select mode="multiple" placeholder="选择状态" allowClear>
            {statuses.map(status => (
              <Option key={status} value={status}>{status}</Option>
            ))}
          </Select>
        </Form.Item>
        
        <Form.Item name="searchText" label="搜索">
          <Input placeholder="输入关键词" allowClear />
        </Form.Item>
        
        <Divider style={{ margin: '12px 0' }} />
        
        <Form.Item style={{ marginBottom: 0 }}>
          <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
            <Button icon={<ClearOutlined />} onClick={handleReset}>
              重置
            </Button>
            <Button type="primary" icon={<FilterOutlined />} onClick={handleFilter}>
              筛选
            </Button>
            <Button icon={<ReloadOutlined />} onClick={() => fetchLogs()}>
              刷新
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default LogFilterPanel; 